<template>
	<view class="base">
		<view class="head">
			<view class="info">
				<img src="../../static/avatar.png" alt="" class="avatar" />
				<view class="user">{{name}}</view>
			</view>
			<view class="message">
				<view class="time">{{time}}</view>
				<view class="time">{{sen}}</view>
			</view>
		</view>
		<view class="top" @click="()=>go('/pages/shanbei/Shanbei')">
			<view class="topText">我爱记单词</view>
		</view>
		<view class="enhance" @click="()=>go('/pages/select/select')">
			<view class="indexText">单词强化训练</view>
		</view>
		<view class="number">
			<view class="indexText" style="margin-left: 10px; color: black;">
				词汇量评测
			</view>
		</view>
		<view class="function">
			<view class="game">
				<view class="font">填填看</view>
			</view>
			<view class="score">
				<view class="font">积分兑换</view>
			</view>
		</view>
		<view class="logout">
			<button style="width: 85vw;" @click="()=>go('/pages/index/index')">退出登录</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue";

	const name = ref('')
	// 问候语
	const time = ref('')

	const sen = ref('')
	
	// 路由跳转统一函数
	function go(url:string){
		if(url=='/pages/main/main'){
			uni.removeStorageSync('info')
			uni.removeStorageSync('token')
		}
		uni.navigateTo({
			url:url,
			fail(e) {
				console.log(e)
			}
		})
	}

	function init() {
		const now = new Date();
		const hour = now.getHours();
		let sentence = ''
		if (hour >= 5 && hour < 9) {
			sentence = "早上好,一日之计在于晨";
		} else if (hour >= 9 && hour < 12) {
			sentence = "上午好,一鼓作气,加油吧！";
		} else if (hour >= 12 && hour < 14) {
			sentence = "中午好,稍微休息一下吧";
		} else if (hour >= 14 && hour < 18) {
			sentence = "下午好，抓住今天的尾巴吧";
		} else if (hour >= 18 && hour < 23) {
			sentence = "晚上好，睡前记住的东西会在梦里反复出现";
		} else {
			sentence = "夜深了，早点休息"; // 23点-5点
		}
		sen.value = sentence
		const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		const dayOfWeek = weekdays[now.getDay()];
		const formattedDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日  ${dayOfWeek}`;
		
		time.value = formattedDate
		name.value = uni.getStorageSync('info')
	}
	init()
</script>

<style scoped>
	.base {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to right, #ffffff, #bedddf);
		height: 100vh;

	}

	.head {
		width: 85vw;
		height: auto;
		display: flex;
		align-items: center;
		/* border: 1px solid black; */
		margin-top: 10px;
		/* border-radius: 20px; */


	}

	.avatar {
		width: 15vw;
		height: 15vw;

	}

	.user {
		font-size: 18px;
	}

	.info {
		width: 30vw;
		height: 12vh;
		display: flex;
		flex-direction: column;
		border-right: 1px solid rgb(157, 155, 155);
		align-items: center;
		margin-right: 1vw;
		background-color: #bdf0f3;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		justify-content: center;
	}

	.message {
		display: flex;
		width: 53vw;
		height: 12vh;
		flex-direction: column;
		align-items: center;
		background-color: #e7815c;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		justify-content: center;
		border-radius: 10px;
		color: white;
	}

	.top {
		width: 85vw;
		height: 20vh;
		margin-top: 2vh;
		background-image: url('../../static/indexTop.jpg');
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12px;
	}

	.topText {
		font-weight: 600;
		font-size: 35px;
		color: white;
	}

	.enhance {
		width: 85vw;
		height: 14vh;
		margin-top: 20px;
		background-image: url('../../static/enhance.jpg');
		background-size: cover;
		display: flex;
		align-items: center;
		border-radius: 12px;
	}

	.indexText {
		font-weight: 600;
		font-size: 22px;
		color: white;
		margin-left: auto;
		margin-right: 8vw;
	}

	.number {
		width: 85vw;
		height: 14vh;
		margin-top: 20px;
		background-image: url('../../static/number.jpg');
		background-size: cover;
		display: flex;
		align-items: center;
		border-radius: 12px;
	}

	.function {
		width: 85vw;
		height: 14vh;
		margin-top: 20px;
		/* border: 1px solid black; */
		align-items: center;
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.game,
	.score {
		width: 41vw;
		height: 13vh;
		/* border: 1px solid rgb(73, 73, 73); */
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.game {
		background-image: linear-gradient(to right, #ffffff, #070707);
	}

	.score {
		background-image: linear-gradient(to right, #052d83, #aec6e7);
	}

	.font {
		font-size: 20px;
		color: #e7e8eb;
	}

	.logout {
		margin-top: 20px;
	}
</style>